// 歌单列表
import { memo } from "react";
import { PlayListContainer } from "./style"
import { BiPlayCircle, BiDotsVerticalRounded } from "react-icons/bi"
import { checkMusic } from "../../services/music";
import { setCurrentPlay } from "@/store/playerSlice"
import { useDispatch } from "react-redux";
import { debounce } from "@/utils"

export default memo(function PlayList ({ list = [] }) {
    const dispatch = useDispatch()
    const handleCheckMusicAndPlay = debounce((item) => {
        const params = { id: item.id }
        checkMusic(params).then(res => {
            if (res.message === 'ok') {
                dispatch(setCurrentPlay(item))
            }
        })
    }, 300)
    return <PlayListContainer>
        {
            list.map((item, index) => {
                return (
                    <div className="play-list-item" key={index} onClick={() => handleCheckMusicAndPlay(item)}>
                        {/* ===基本信息=== */}
                        <div className="baseInfo">
                            <span className="index">{index + 1}.</span>
                            {/* 歌曲名称 */}
                            <span className="name text_overflow_1">{item.name}</span>
                            {/* 专辑信息 */}
                            <span className="al_name text_overflow_1">({item?.al?.name})</span>
                            {/* 艺术家信息 */}
                            <p className="singer">{item?.ar.map(item => item.name).join(",")}</p>
                        </div>
                        {/* ===列表控制区域=== */}
                        <div className="controller-icon">
                            {/* 播放按钮🔘 */}
                            <BiPlayCircle className="icon play-icon" />
                            <BiDotsVerticalRounded className="icon more-icon" />
                        </div>
                    </div>
                )
            })
        }
    </PlayListContainer>
})